<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>库存盘点</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1322088_1rnk0sqbohd.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="js/layui/css/layui.css" />
		<link rel="stylesheet" href="js/layer/mobile/need/layer.css" />
		<link rel="stylesheet" href="css/caiStyle.css" />
		<link rel="stylesheet" href="css/dingdan.css" />
	</head>
<style type="text/css">
	.layui-form,
	.order-list{
		width: 100%;
	}
	.footer-buttom{
		/*bottom: 0px !important;*/
	}
</style>
	<body class="bc_f">
		<div class="gs-box">
			<div class="InventoryBox"  v-show="importbox==1">
				<div class="advanced_top">
					<div class="section-step">
						<div class="ant-steps ant-steps-horizontal ant-steps-label-horizontal">
							<div class="ant-steps-item ant-steps-status-process" style="margin-right: -72px; width: 50%;">
								<div class="ant-steps-tail" style="padding-right: 72px;"><i></i></div>
								<div class="ant-steps-step ">
									<div class="ant-steps-main ">
										<div class="ant-steps-title">上传导入文件</div>
										<!-- react-text: 831 -->
										<!-- /react-text -->
									</div>
								</div>
							</div>
							<div class="ant-steps-item ant-steps-status-wait" style="margin-right: -72px; width: 50%;">
								<div class="ant-steps-tail" style="padding-right: 72px;"><i></i></div>
								<div class="ant-steps-step">
									<div class="ant-steps-main">
										<div class="ant-steps-title">导入文件预览</div>
										<!-- react-text: 841 -->
										<!-- /react-text -->
									</div>
								</div>
							</div>
							<div class="ant-steps-item ant-steps-status-wait">
								<div class="ant-steps-tail" style="padding-right: 0px;"><i></i></div>
								<div class="ant-steps-step">
									<div class="ant-steps-main">
										<div class="ant-steps-title">导入完成</div>
										<!-- react-text: 851 -->
										<!-- /react-text -->
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="sm-box gs-box">
					<form class="layui-form">
						<div class="gs-box-item" >
							<div class="form-box">
								<div class="col-md-12 padding-0">
									<div class="fb-box disPlay">
										<p class="pd_title ">1、选择盘点仓库</p>
										<div @click="handSelect" class="form-controls bg-white form-controls_pd">
											<span>{{checkSelcet}}</span>
											<i class="iconfont icon-xiangxia"></i>
											<div class="list-ite" v-if="showSelcet">
												<ul class="mp00">
													<li v-for="(item,index) in selectList" :class="{active:item.active}" :key="index" @click="checkSel($event,item.name,index)" class="list-none">{{item.name}}</li>
												</ul>
											</div>
										</div>
									</div>
								</div>
								<div class="col-md-12 padding-0">
									<div class="fb-box disPlay">
										<p class="pd_title">2、商品库存数据下载</p>
										<div @click="transfer" class="form-controls bg-white form-controls_pd">
											<span>{{transfer1}}</span>
											<i class="iconfont icon-xiangxia"></i>
											<div class="list-ite" v-if="enteWarehouse">
												<ul class="mp00">
													<li v-for="(item1,index1) in selectList1" :class="{active:item1.active}" :key="index1" @click="checkSel1($event,item1.name,index1)" class="list-none">{{item1.name}}</li>
												</ul>
											</div>
										</div>
									</div>
								</div>
								<div class="col-md-12 padding-0">
									<div class="fb-box disPlay">
										<p class="pd_title">3、添加盘点数据</p>
										<div class="uploadBox"><i class="iconfont icon-xuanzewenjian icon_shangchuan"></i><input type="file" class="upload" name="" id="" value="" /></div>
									</div>
								</div>
							</div>
						</div>
						<!--导入预览-->
						
					</form>
				</div>
				<div class="footer-buttom">
					<button class="closegjss" type="button">取消</button>
					<button type="button" @click="nextStep(1)">下一步</button>
				</div>
			</div>
			<!--列表-->
			<div class="InventoryBox"  v-show="importbox==2">
				<div class="advanced_top">
					<div class="section-step">
						<div class="ant-steps ant-steps-horizontal ant-steps-label-horizontal">
							<div class="ant-steps-item ant-steps-status-process" style="margin-right: -72px; width: 50%;">
								<div class="ant-steps-tail" style="padding-right: 72px;"><i></i></div>
								<div class="ant-steps-step fileb_tn">
									<div class="ant-steps-main ">
										<div class="ant-steps-title C989696">上传导入文件<i class="iconfont icon-gou"></i></div>
									</div>
								</div>
							</div>
							<div class="ant-steps-item ant-steps-status-process" style="margin-right: -72px; width: 50%;">
								<div class="ant-steps-tail" style="padding-right: 72px;"><i></i></div>
								<div class="ant-steps-step ">
									<div class="ant-steps-main ">
										<div class="ant-steps-title">导入文件预览</div>
										<!-- react-text: 831 -->
										<!-- /react-text -->
									</div>
								</div>
							</div>
							<div class="ant-steps-item ant-steps-status-wait">
								<div class="ant-steps-tail" style="padding-right: 0px;"><i></i></div>
								<div class="ant-steps-step">
									<div class="ant-steps-main">
										<div class="ant-steps-title">导入完成</div>
										<!-- react-text: 851 -->
										<!-- /react-text -->
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!--数据列表-->
				<div class="gs-box-item" >
					<div class="form-box">
						<div class="order-list">
							<table id="order-list" lay-filter="test"></table>
						</div>
					</div>
				</div>
				<div class="footer-buttom">
					<button class="closegjss" type="button">取消</button>
					<button type="button" @click="nextStep(2)">确定导入</button>
				</div>
			</div>
			<!--导入完成-->
			<div class="InventoryBox"  v-show="importbox==3">
				<div class="advanced_top">
					<div class="section-step">
						<div class="ant-steps ant-steps-horizontal ant-steps-label-horizontal">
							<div class="ant-steps-item ant-steps-status-process" style="margin-right: -72px; width: 50%;">
								<div class="ant-steps-tail" style="padding-right: 72px;"><i></i></div>
								<div class="ant-steps-step fileb_tn">
									<div class="ant-steps-main ">
										<div class="ant-steps-title C989696">上传导入文件<i class="iconfont icon-gou"></i></div>
									</div>
								</div>
							</div>
							<div class="ant-steps-item ant-steps-status-process" style="margin-right: -72px; width: 50%;">
								<div class="ant-steps-tail" style="padding-right: 72px;"><i></i></div>
								<div class="ant-steps-step fileb_tn">
									<div class="ant-steps-main ">
										<div class="ant-steps-title C989696">导入文件预览<i class="iconfont icon-gou"></i></div>
										<!-- react-text: 831 -->
										<!-- /react-text -->
									</div>
								</div>
							</div>
							<div class="ant-steps-item ant-steps-status-process">
								<div class="ant-steps-tail"><i></i></div>
								<div class="ant-steps-step">
									<div class="ant-steps-main ">
										<div class="ant-steps-title">导入完成</div>
										<!-- react-text: 831 -->
										<!-- /react-text -->
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!--数据列表-->
				<div class="text-center ">
					<div class="show-result mt50 mB50">
						<h3 class="Cf10000 fs16">导入失败！</h3>
						<p>共<span style="color: rgb(19, 193, 159);">327</span>数据，成功导入<span style="color: rgb(19, 193, 159);">0</span>条，导入失败<span class="Cf10000">327</span>条。</p>
					</div>
					<div class="show-result">
						<h3 class="fs16 fontWB">导入失败的原因可能有：</h3>
						<ul class="show-result-reason">
							<li>1、系统中没有指定商品存在</li>
							<li>2、盘点数量不能为空</li>
							<li>3、商品编码、商品名称、商品规格完全相同的多条商品</li>
						</ul>
						<div class="download-result">
							<button type="button" class="ant-btn ant-btn-ghost"><i class="iconfont icon-xiazai"></i><span>下载导入失败数据</span></button>
							<p class="download-result-tip">按上述要求检查修改后，重新上传</p>
						</div>
					</div>
				</div>
				<div class="footer-buttom">
					<!--<button class="closegjss" type="button">取消</button>-->
					<button type="button" class="footer-cx" @click="nextStep(3)">重新上传</button>
					<button type="button"  class="hidden">上传成功</button>
				</div>
			</div>
		</div>
		
		<script src="js/jquery-v3-3.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/new_file.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/Gather.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: ".gs-box",
				data: {
					base64Url: "",
					checkSelcet: "调出仓库",
					transfer1: "调入仓库",
					showSelcet: false,
					enteWarehouse: false,
					importbox:1,//上传导入文件
//					preview:2,//导入文件预览
//					complete:3,//导入完成
					selectList: [{
							name: "汽车用品",
							value: "1"
						},
						{
							name: "手机数码",
							value: "2"
						},
						{
							name: "食品酒水饮料",
							value: "3"
						},
						{
							name: "电子机电",
							value: "4"
						},
						{
							name: "家用电器",
							value: "5"
						},
						{
							name: "个护化妆品",
							value: "6"
						},
						{
							name: "钟表珠宝",
							value: "7"
						},
						{
							name: "家具家装",
							value: "8"
						},
						{
							name: "服装鞋帽箱包",
							value: "9"
						},
						{
							name: "日用百货",
							value: "10"
						},
						{
							name: "母婴用品",
							value: "11"
						},
						{
							name: "生鲜农贸",
							value: "12"
						},
						{
							name: "餐饮连锁",
							value: "13"
						},
						{
							name: "医药行业",
							value: "14"
						},
						{
							name: "其他行业",
							value: "15"
						}
					],
					selectList1: [{
							name: "汽车用品",
							value: "1"
						},
						{
							name: "手机数码",
							value: "2"
						},
						{
							name: "食品酒水饮料",
							value: "3"
						},
						{
							name: "电子机电",
							value: "4"
						},
						{
							name: "家用电器",
							value: "5"
						},
						{
							name: "个护化妆品",
							value: "6"
						},
						{
							name: "钟表珠宝",
							value: "7"
						},
						{
							name: "家具家装",
							value: "8"
						},
						{
							name: "服装鞋帽箱包",
							value: "9"
						},
						{
							name: "日用百货",
							value: "10"
						},
						{
							name: "母婴用品",
							value: "11"
						},
						{
							name: "生鲜农贸",
							value: "12"
						},
						{
							name: "餐饮连锁",
							value: "13"
						},
						{
							name: "医药行业",
							value: "14"
						},
						{
							name: "其他行业",
							value: "15"
						}
					]
				},
				mounted() {
					for(let i = 0; i < this.selectList.length; i++) {
						this.selectList[i].active = false;
					}
				},
				methods: {
					handSelect() {
						if(this.showSelcet) {
							this.showSelcet = false;
						} else {
							this.showSelcet = true;
						}
					},
					transfer() {
						if(this.enteWarehouse) {
							this.enteWarehouse = false;
						} else {
							this.enteWarehouse = true;
						}
					},
					checkSel(e, title, index) {
						this.checkSelcet = title;
						for(let i = 0; i < this.selectList.length; i++) {
							if(i == index) {
								this.selectList[i].active = true;
							} else {
								this.selectList[i].active = false;
							}
						}
					},
					checkSel1(e, title, index1) {
						this.transfer1 = title;
						for(let i = 0; i < this.selectList1.length; i++) {
							if(i == index1) {
								this.selectList1[i].active = true;
							} else {
								this.selectList1[i].active = false;
							}
						}
					},
					nextStep(num){
						if(num == 1){//下一步
							vm.importbox = 2;
						}
						if(num == 2){//确认导入
							vm.importbox = 3;
						}
						if(num == 3){//确认导入
							vm.importbox = 1;
						}
					}
				}
			
			});
			//数据表
			layui.use('table', function(){
			  var table = layui.table;
				// 数据列表渲染
				table.render({
					elem: '#order-list'
					,data:DataArray2// data为数据库查到的数据
					,height:340
					,cols: [[//以下field字段为为数据库相同,title为字段描述
						{field:'mid',title: ''}
					  ,{field:'pwd',title: '编码'}
						,{field:'uname', title: '商品'}
						,{field:'sex',title: '规格'}
						,{field:'rank', title: '条形码'}
						,{field:'uptime',  title: '商品状态',}
						,{field:'exptime', title: '单位',}
						,{field:'money',  title: '库存上限'}
						,{fixed: 'right', title:'库存下限'}
						,{fixed: 'right', title:'库存数量'}
						,{fixed: 'right', title:'盘点数量'}
						,{fixed: 'right', title:'盘盈盘亏'}
						,{fixed: 'right', title:'备注'}
					]]
//					,page: true
				});
				
				//监听行单击事件
				table.on('row(test)', function(obj){
				  console.log(obj.tr) //得到当前行元素对象
				  console.log(obj.data) //得到当前行数据
				});
			});
			
		</script>
	</body>

</html>